<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-03-10 18:05:06
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\wms\uiSelectLayerNewWH\uiSelectLayerNewWH.vue
 * CIMC-V2
-->
<template>
  <div class="w-full bg-gray-200" style="height: 100vh">
    <div class="flex mb-12 pt-10 px-4">
      <p class="mr-6">
        <span>商品编码：</span>
        <span>Q1054190306009002</span>
      </p>
      <p class="mr-6">
        <span>商品数量：</span>
        <span>1</span>
      </p>
      <p>
        <span>出库类型：</span>
        <span>调拨出库</span>
      </p>
    </div>
    <div class="grid grid-cols-3 gap-4">
      <div class="flex flex-wrap border-4 border-blue-800 mx-6">
        <div
          v-for="item in data1"
          :key="item.title"
          class="w-1/2 text-center border-b-4 border-blue-800"
          :class="[item.bgColor ? 'bg-indigo-100' : 'bg-white', item.br ? 'border-r-2' : '']"
          :style="{
            height: item.isHeight ? '80px' : '40px',
            lineHeight: item.isHeight ? '80px' : '40px',
            background: item.isActive ? 'deeppink' : '',
            borderRightColor: '#ccc',
          }"
        >
          {{ item.title }}
        </div>
        <div class="text-center w-full" :style="{ height: '40px', lineHeight: '40px' }">A000162B1A</div>
      </div>
      <div class="text-center">
        <el-image fit="fill" src="url" style="width: 100px; height: 100px">
          <template #error>
            <div class="image-slot">
              <vui-icon icon="image-line" style="font-size: 80px" />
            </div>
          </template>
        </el-image>
        <p class="mb-2">
          编码: Q105419030600
          <span style="font-size: 16px">0002</span>
        </p>
        <p class="mb-1">右前门电动玻璃升降器总成</p>
        <p class="mb-1">外部批次号: 201902280001</p>
        <p class="mb-1">颜色: |款式: |尺码:</p>
        <p class="mb-1">单位: PC</p>
      </div>
      <div class="flex items-center justify-center">
        <div>
          <div class="text-3xl bg-indigo-300 cursor-pointer w-32 h-6 border text-center leading-6" style="width: 220px">+</div>
          <div class="text-3xl w-32 text-center bg-white" style="height: 60px; line-height: 60px; width: 220px">
            {{ `${currentNumber} / ${count}` }}
          </div>
          <div class="text-3xl bg-indigo-300 cursor-pointer w-32 h-6 border text-center leading-6" style="width: 220px">-</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  export default defineComponent({
    name: 'UiHDRJX',
    components: {},
    mixins: [],
    data() {
      return {
        data1: [
          {
            title: '4A',
            isHeight: true,
            br: true,
          },
          {
            title: '4B',
            isHeight: true,
          },
          {
            title: '3A',
            br: true,
          },
          {
            title: '3B',
          },
          {
            title: '2A',
            br: true,
          },
          {
            title: '2B',
          },
          {
            title: '1A',
            isActive: true,
            br: true,
          },
          {
            title: '1B',
            bgColor: true,
          },
        ],
        currentNumber: 0,
        count: 1,
      }
    },
    computed: {},
    created() {},
    mounted() {},
    methods: {},
  })
</script>
